<template>
  <div>
    <!-- 浮动导航 -->
    <div class="float-link-container">
      <FloatSubjectLinkComponent/>
    </div>
    <!-- 页面主体 -->
    <div class="main-container">
      <div class="main-wrap">
        <!-- 右侧的列表 -->
        <div class="right-aside-container">
          <div class="right-aside-wrap">
            <!-- 搜索区域 -->
            <SearchComponent :defaultSearchKeywords="defaultSearchKeywords"/>
            <!-- 推荐列表 -->
            <RecommendListComponent :recommendList="recommendList"/>
          </div>
        </div>
        <!-- 左侧主体 -->
        <div class="left-aside-container">
          <div class="left-aside-wrap">
            <!-- 左侧的文章列表 -->
            <ul class="article-list">
              <li v-for="item in articleList" :key="item.id">
                <div class="article-list-item">
                  <div class="left">
                    <el-image class="image" :src="item.coverUrl" :alt="item.title"></el-image>
                  </div>
                  <div class="right">
                    <h1 class="title"><a :href="'/article/details?id=' + item.id" v-text="item.title"></a></h1>
                    <p class="content" v-text="item.brief"></p>
                    <div>
                      <span class="up">顶 {{item.upCount}}</span>
                      <span class="down">踩 {{item.downCount}}</span>
                      <span class="date" v-text="item.gmtCreate"></span>
                    </div>
                    <div style="clear: both;"></div>
                  </div>
                </div>
                <el-divider/>
              </li>
            </ul>
            <div style="margin-top: 20px;" v-if="articleList.length < total">
              <el-button round type="success" class="btn-load-more" @click="loadMoreArticle">查看更多</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FloatSubjectLinkComponent from '@/components/FloatSubjectLinkComponentView.vue';
import SearchComponent from '@/components/SearchComponentView.vue';
import RecommendListComponent from '@/components/RecommendListComponentView.vue';

export default {
  components: {
    FloatSubjectLinkComponent,
    SearchComponent,
    RecommendListComponent
  },
  data() {
    return {
      currentCategory: {
        id: 6,
        name: '禁忌',
        url: '/jingji'
      },
      pageTitle: '',
      defaultSearchKeywords: '',
      recommendList: [],
      articleList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  methods: {
    loadPageTitle() {
      this.pageTitle = '茶叶的禁忌及副作用 - 学茶商城网';
      document.title = this.pageTitle;
    },
    loadDefaultSearchKeywords() {
      let defaultSearchKeywords = '晚上泡的茶第二天早上能喝吗';
      this.defaultSearchKeywords = defaultSearchKeywords;
    },
    loadRecommendList() {
      let recommendList = [
        {
          id: 1,
          title: '金骏眉哪些人群不能喝',
          image: '/images/20200810_9A80491D3EC10205CC238ADB875BEB24.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 2,
          title: '冰糖柚子茶的禁忌',
          image: '/images/20200213_269514A023B4BFFFF151BA843377FF7C.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 3,
          title: '服用玫瑰花茶的禁忌有哪些？饮用玫瑰花茶的注意事项。',
          image: '/images/20190803_B14C8484B8E5FC87EB4C950FA2350C0A.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 4,
          title: '晚上泡的茶第二天早上能喝吗',
          image: '/images/20200223_080FC48502AF5BB623D1CEDF4A4340CE.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 5,
          title: '什么时候不宜喝茶',
          image: '/images/20190903_6C2FB0777A32F0D6C7BC69ABCC1BF3FE.png',
          link: '/article/details?id=9527'
        },
        {
          id: 6,
          title: '陈皮玫瑰花茶的功效与禁忌',
          image: '/images/20200406_34580EEB998EBCFDD904BC4C5B4F6946.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 7,
          title: '黄芪生姜红枣茶的禁忌',
          image: '/images/20200702_4A75117455589553CED3BEB9B38C9296.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 8,
          title: '柑普茶什么人不能喝',
          image: '/images/20210219_D73677B94EB4A5C69352637D074B034A.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 9,
          title: '浓茶，喝多了会有这几个危害！',
          image: '/images/20200112_D361EEAD13AFA11A862EC19B2A50DB2B.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 10,
          title: '保温杯泡茶真的致癌吗？',
          image: '/images/20191130_62AB3252FF24C4775FCE00774C2D54E1.jpg',
          link: '/article/details?id=9527'
        }
      ];
      this.recommendList = recommendList;
    },
    loadMoreArticle() {
      this.currentPage++;
      this.loadArticleList();
    },
    loadArticleList() {
      let url = 'http://localhost:9180/content/articles/list-by-category?categoryId=' + this.currentCategory.id +'&page=' + this.currentPage;
      console.log('url = ' + url);

      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.articleList = this.articleList.concat(jsonResult.data.list);
          this.currentPage = jsonResult.data.currentPage;
          this.pageSize = jsonResult.data.pageSize;
          this.total = jsonResult.data.total;
        } else {
          let title = '操作失败';
          this.$alert(jsonResult.message, title, {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      }).catch(error => {
        let title = '错误';
        let message = '程序执行过程中出现错误，请打开浏览器的控制台查看详细错误信息！';
        this.$alert(message, title, {
          confirmButtonText: '确定',
          callback: action => {
          }
        });
        console.log(error);
      });
    }
  },
  mounted() {
    this.loadPageTitle();
    this.loadDefaultSearchKeywords();
    this.loadArticleList();
    this.loadRecommendList();
  }
}
</script>

<style>
</style>